<template>
  <div>
    <i v-if="!!icon" :class="icon" />
    <span slot='title' class="item">
      <span>{{ title }}</span>

      <el-popover
        placement="bottom-start"
        width="150"
        trigger="click"
      >
        <div class="popover-wrap">
          <span @click="updateName = true">修改名称</span>
          <span v-if="flag">添加角色</span>
          <span v-else>调整分组</span>
          <span class="delete" @click="deleteRoleOrGroup(id)">删除</span>
        </div>

        <i class="el-icon-setting" slot="reference" />
      </el-popover>
    </span>


    <el-dialog title="修改名称" :visible.sync="updateName" width='30%' :close-on-click-modal="false">
      <el-form :model="updateForm" label-width="80px">
        <el-form-item label="名称">
          <el-input v-model="updateForm.name" placeholder="请输入名称"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size='small' @click="updateName = false">取 消</el-button>
        <el-button size='small' type="primary" @click="sureUpdate">确 定</el-button>
      </div>
    </el-dialog>





  </div>
</template>
<script>
import { deleteRole ,updateRoleGroup} from '@/api/contacts'
export default {
  name: 'MenuItem',
  props: {
    icon: {
      type: String,
      default: ''
    },
    title: {
      type: String,
      default: ''
    },
    id:{
      type: Number,
      default: 0
    },
    flag:{
      type:Boolean,
      default:false
    }
  },
  data(){
    return{
      updateName:false,
      updateForm:{ name:''}
    }
  },
  created(){
    this.updateForm.name=this.title
  },
  methods:{
    async deleteRoleOrGroup(id){
      // 删除角色信息 /nuwa-sys-role/deleteRole
      const res = await deleteRole({id})
      if(res.code===200){
        this.$message.success('删除成功')
        this.$parent.$parent.$parent.$parent.init()
      }else{
        this.$message.error(res.msg)
      }
    },
    async sureUpdate(){
      // 角色组--修改功能 /nuwa-sys-role/updateRoleGroup
      const params = { roleGroupId:this.id,roleGroupName:this.updateForm.name}
      const res = await updateRoleGroup(params)
      if(res.code===200){
        this.$message.success('修改成功')
        this.updateName = false
        this.$parent.$parent.$parent.$parent.init()
      }
      else{
        this.$message.error('修改失败')
      }
    }
  }
}
</script>

<style lang='scss' scoped>
.el-icon-setting{
  display: none;
  font-size: 15px;
}
.el-submenu:hover, .el-menu-item:hover{
 .el-icon-setting{
    display: inline-block;
    margin-bottom: 6px;
  }
}
.popover-wrap{
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  height: 150px;
  span{
    line-height: 30px;
    padding-left: 10px;
    width: 150px;
    height: 30px;
    border-radius: 6px;
    &:hover{
      background: #f4f6f9;
    }
  }
  .delete{
    color: red;
  }
}
.item{
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
 
}

</style>
